<template>
  <div class="drag head">设置</div>
  <div class="main">
    <div class="left">
      <div :class="['个人信息' == currentSelection ? 'active' : '']" @click="currentSelection = '个人信息'">个人信息
      </div>
      <br>
      <div :class="['文件管理' == currentSelection ? 'active' : '']" @click="currentSelection = '文件管理'">文件管理
      </div>
    </div>
    <div class="center"></div>
    <div class="right">
      <div v-if="'个人信息' == currentSelection">
        <el-form>
          <el-form-item>
            <el-upload
              :before-upload="beforeUpload"
              :http-request="uploadImage"
              :multiple="false"
              :show-file-list="false"
              accept="image/*"
              multiple
              name="file"
              style="vertical-align: bottom;margin-left: 5px;"
            >
              <el-avatar :src="avatar" shape="square" size="large" style="cursor: pointer"
                         title="点击更换头像"></el-avatar>
            </el-upload>
          </el-form-item>
          <el-form-item>
            甜蜜账号：
            <el-input v-model="formData.userSweetCircleId" clearable placeholder="请输入甜蜜账号" />
          </el-form-item>
          <el-form-item>
            昵称：
            <el-input v-model="formData.nickName" clearable placeholder="请输入昵称" />
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="formData.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="朋友权限" prop="joinType">
            <el-switch v-model="formData.joinType" :active-value="1" :inactive-value="0" />&nbsp;
            <div class="info">加我为好友时需要验证</div>
          </el-form-item>
          <el-form-item>
            地区：
            <el-cascader
              v-model="formData.areaName"
              :options="AreaData"
              @change="change"
            />
          </el-form-item>
          <el-form-item label="个性签名" prop="personalSignature">
            <el-input v-model.trim="formData.personalSignature" :show-word-limit="true" clearable maxlength="35"
                      placeholder="请输入个性签名"
                      resize="none" rows="3" type="textarea"></el-input>
          </el-form-item>

        </el-form>
        <div class="submit">
          <el-button type="primary" @click="savaInfo">修改信息</el-button>
        </div>
      </div>
    </div>
  </div>


  <WindowOperation :closeType="0" :showMax="false" :showSetTop="false"></WindowOperation>
</template>
<script setup>
import WindowOperation from '#/components/WindowOperation.vue'
import { useUserInfoStore } from '#/stores/UserInfoStore'
import { onMounted, ref } from 'vue'
import Tool from '#/utils/Tool'
import AreaData from '#/utils/AreaData'
import Api from '#/utils/Api'
import { ElMessage } from 'element-plus'

const userInfoStore = useUserInfoStore()
//当前选择
const currentSelection = ref('个人信息')
const avatar = ref('')
const userInfo = userInfoStore.getUserInfo()
let dataForm = new FormData()
const formData = ref({
  avatar: '',
  userId: '',
  userSweetCircleId: '',
  nickName: '',
  sex: '',
  joinType: '',
  areaName: '',
  personalSignature: ''
})


// 上传头像
const uploadImage = async (file) => {
  if (dataForm.get('file')) {
    dataForm.set('file', file.file)
  } else {
    dataForm.append('file', file.file)
  }
  if (dataForm.get('userId')) {
    dataForm.set('userId', formData.value.userId)
  } else {
    dataForm.append('userId', formData.value.userId)
  }
}
const beforeUpload = async (file) => {
  formData.value.avatar = file.name
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = () => {
    avatar.value = reader.result
  }
}

const savaInfo = async () => {

  // 将数组中的所有元素 使用空格拼接返回字符串
  if (formData.value.areaName.length == 2) {
    formData.value.areaName = formData.value.areaName[0] + ' ' + formData.value.areaName[1]
  } else {
    formData.value.areaName = formData.value.areaName[0]
  }
  if (dataForm.get('file')) {
    const response = await Api.uploadAvatar(dataForm)
    if (response.code !== 200) {
      ElMessage.error(response.msg)
      return  // 抛出异常 上传头像失败
    }
  }
  const res = await Api.updateUserInfo(formData.value)
  if (res.code === 200) {
    ElMessage.success(res.msg)
    Object.assign(userInfo, formData.value)
    userInfoStore.setUserInfo(userInfo)
    window.ipcRenderer.send('updateUserInfoA')


  } else {
    ElMessage.error(res.msg)
  }
}

const change = (value) => {
  // console.log(value)
}


onMounted(() => {

  Object.assign(formData.value, userInfo)
  avatar.value = Tool.getAvatar(formData.value.userId, formData.value.avatar)
  formData.value.areaName = formData.value.areaName.split(' ')
  // window.ipcRenderer.on("setting-ready", (e, data) => {
  //   userInfo.value = data
  //   avatar.value = Tool.getAvatar(userInfo.value.userId,userInfo.value.avatar)
  // });
})

</script>
<style lang="scss" scoped>
.head {
  height: 25px;
  color: #8c8c8c;
  font-size: 15px;
  padding: 5px 0 0 10px;
  background: #f3f3f4;
}

.main {
  display: flex;
  flex-direction: row;
  padding-top: 15px;
  background: #f3f3f4;

  .left {
    width: 90px;
    height: calc(100vh - 40px);
    padding: 0 0 5px 10px;
    user-select: none;
    cursor: pointer;
  }

  .center {
    width: 1px;
    height: calc(100vh - 40px);
    background: #cbcbcb;
  }

  .right {
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .el-form {
      width: 300px;
    }

    .el-form-item {
      margin-bottom: 0;

      .el-input {
        width: 200px;
      }

      :deep(.el-input__wrapper) {
        background: #f1f1f3;
        box-shadow: none;

      }
    }
  }
}

.active {
  color: #07c160;
}

.submit {
  display: flex;
  margin-top: 10px;
  justify-content: center;
}
</style>
